import React, { Component } from 'react'
import "./pay.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer';
import { getApiUserShopCart , getApiDeleteShopCart , getApiShopCartInfo , getApiCreateOrder , baseUrl , getApiWxPayOrderInfo } from "../../axios/api"
import { get, UrlSearch } from '../../axios/localstorage';
import { message } from 'antd';
import QRCode from 'qrcode.react'

export default class pay extends Component {

    state = {
        data:{},
        list:[],
        money:0,
        showAll:false,
        alert:false,
        type:1,
        sn:'',
        mweb_url:'ghaogahmahjam.hbjadljhkeam.hadfljhadhljadfhb,asd.hmbaeljhkbalhjbaeokjhgb',
        islive:0,
        status:'',
        wxPayAlert:false,
        num:0,
    }

    componentWillMount(){
        window.scroll(0,0)

        let id = UrlSearch('id');
        let islive = UrlSearch('islive');
        let oid = UrlSearch('oid');
        let status = UrlSearch('status');

        if(id){
            this.setState({
                id
            })
        }

        if(status){
            console.log(status);
            this.setState({
                status:parseInt(status),
                alert:true
            })
        }

        if(islive){
            this.setState({
                islive:parseInt(islive)
            })
        }

        this.setState({
            oid
        })

        // this.getData();
        this.getShopCartInfo(oid);
    }

    gotoPay=()=>{
        if(this.state.sn){
            this.doPay();
        }else{
            let param = {
                ids:this.state.oid,
                token:get('token'),
                money:this.state.money,
            }

            getApiCreateOrder(param)
            .then( req =>{
                if(req.data.code === 1){
                    let sn = req.data.data;
                    this.setState({
                        sn
                    })

                    setTimeout(()=>{
                        this.doPay();
                    },50)
                    
                }
            }).catch( err =>{
                console.error(err);
            })
        }
    }

    doPay=()=>{
        if(this.state.type === 1){
            let url = baseUrl +"api/Alipay/alipay_pc?order_sn=" + this.state.sn + '&token=' + get('token');
            window.open(url,'_parent');
        }else{
            this.setState({
                wxPayAlert:true
            })

            this.startRecoveWxPay();
        }
    }

    startRecoveWxPay=()=>{
        let timer = setInterval(()=>{

            let num = this.state.num + 2;
            this.setState({
                num
            })

            if(num >= 30){
                this.setState({
                    alert:true,
                    wxPayAlert:false,
                    status:0
                })
                clearInterval(this.state.timer);
            }

            this.getWxOrderInfo();
        },2000)
        this.setState({
            timer
        })
    }

    getWxOrderInfo=()=>{
        let param = {
            sn:this.state.sn
        }

        getApiWxPayOrderInfo(param)
        .then( req =>{
            if(req.data.code === 1){

            }
        }).catch( err =>{
            console.error(err);
        })
    }

    changeWayType=(type)=>{
        this.setState({
            type
        })
    }

    getShopCartInfo=(oid)=>{
        let param = {
            token:get('token'),
            ids:oid
        }

        getApiShopCartInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data
                })

                setTimeout(()=>{
                    this.countMoney();
                },50)
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    getData=()=>{
        getApiUserShopCart({token:get('token')})
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                let m = 0;
                for(var i=0;i<data.length;i++){
                    // m = m + parseFloat(data[i].money);
                    data[i].chosen = false;
                }
                console.log(m);
                this.setState({
                    list:data,
                    money:m
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }



    countMoney=()=>{
        let data = this.state.list;
        let m = 0;
        for(var i=0;i<data.length;i++){
            m = m + parseFloat(data[i].money);
        }

        this.setState({
            money:m,
        })

        
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    closeWxPay=()=>{
        clearInterval(this.state.timer);
        this.setState({
            wxPayAlert:false,
        })
    }

    gotoDel=()=>{
        let arr = [];
        let data = this.state.list;
        for(var i=0;i<data.length;i++){
            if(data[i].chosen){
                arr.push(data[i].id)
            }
        }

        if(arr.length === 0){
            message.info('请先选择需要删除的商品!');
            return false;
        }

        let param = {
            ids:arr.join(','),
            token:get('token')
        }

        getApiDeleteShopCart(param)
        .then( req =>{
            if(req.data.code === 1){
                this.getData();
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    render() {
        return (
            <div className="pay">
                <Header show='1' />
                <div className="main">
                    <div className="cen">
                        <div className="box">
                            <div className="thead">
                                <img alt="" className="wei" src="assets/imgs/weizhi.png" />
                                <p className="p_point" onClick={()=>{this.gotoPage('/course')}}>课程中心</p>
                                <img alt="" src="assets/imgs/xiaji.png" />
                                <p hidden={!this.state.id} className="p_point" onClick={()=>{this.gotoPage('/courseinfo?id='+this.state.id)}}>课程详情</p>
                                <p hidden={this.state.id} className="p_point" onClick={()=>{this.gotoPage('/basket')}}>课程篮</p>
                                <img alt="" src="assets/imgs/xiaji.png" />
                                <p>结算中心</p>
                            </div>

                            <div className="none" hidden={this.state.list.length !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>课程篮暂无商品</p>
                            </div>

                            <div className="mbox">
                                {
                                    this.state.list.map((item,index)=>{
                                        return <div className="info" key={index}>
                                                    <div className="ileft" style={item.type === 1?{backgroundImage:"url('"+item.info.image_text+"')"}:{backgroundImage:"url('"+item.info.thumb_text+"')"}}>
                                                        <span hidden={item.type === 1}>直播</span>
                                                    </div>
                                                    <div className="iright">
                                                        <div className="title">
                                                            <h2>{item.info.title}</h2>
                                                            
                                                            <div hidden={!item.info.is_new}>精品</div>
                                                        </div>
                                                        <div className="details">
                                                            <img alt="" src="assets/imgs/renhsu.png" />
                                                            <p>{item.info.sale_num}人</p>
                                                            <img alt="" src="assets/imgs/leixing.png" />
                                                            <p>{item.info.nums}课</p>
                                                            <img alt="" src="assets/imgs/leibie.png" />
                                                            <p>{item.info.label}</p>
                                                            <img alt="" src="assets/imgs/shijain.png" />
                                                            <p>{item.info.create_time_text}</p>
                                                        </div>
                                                        <h4>¥ {item.money}</h4>
                                                    </div>
                                                </div>
                                    })
                                }
                            </div>

                            <div className="ways">
                                <h1>选择支付方式</h1>
                                <div className="w_item" onClick={()=>{this.changeWayType(1)}}>
                                    <span hidden={this.state.type === 1}></span>
                                    <img hidden={this.state.type !== 1} className="icon" alt="" src="assets/imgs/yiwancheng.png" />
                                    <img alt="" className="img" src="assets/imgs/zhifubaozhifu.png" />
                                    <p>支付宝支付</p>
                                </div>
                                <div className="w_item" onClick={()=>{this.changeWayType(2)}}>
                                    <span hidden={this.state.type === 2}></span>
                                    <img hidden={this.state.type !== 2} className="icon" alt="" src="assets/imgs/yiwancheng.png" />
                                    <img  alt="" className="img" src="assets/imgs/weixinzhifu.png" />
                                    <p>微信支付</p>
                                </div>
                            </div>

                            

                            <div className="count">
                                <h2>总计：</h2>
                                <p>¥{this.state.money}</p>
                                <button onClick={()=>{this.gotoPay()}}>去结算</button>
                            </div>

                        </div>
                    </div>
                </div>

                <div className="alert" hidden={!this.state.wxPayAlert}>
                    <div className="wxbox">
                        <img alt="" onClick={()=>{this.closeWxPay()}} className="close" src="assets/imgs/tankuangcha.png" />
                        <div className='cen'>
                            <div className="qrbox">
                                <QRCode
                                    value={this.state.mweb_url}  //value参数为生成二维码的链接
                                    size={200} //二维码的宽高尺寸
                                    fgColor="#000000"  //二维码的颜色
                                />
                            </div>
                        </div>
                        <div className="wtext">
                            <img alt="" src="assets/imgs/weixinzhifu.png" />
                            <h2>扫码支付</h2>
                        </div>
                    </div>
                </div>

                <div className="alert" hidden={!this.state.alert}>
                    <div className="abox" hidden={this.state.status !== 1}>
                        <div className='cen'>
                            <img alt="" src="assets/imgs/chenggong.png" />
                        </div>
                        <h1>您已支付成功！</h1>
                        <p>您的订单已支付成功，您可在我的订单中查看具体详情</p>
                        <div className="cen">
                            <button onClick={()=>{this.gotoPage('/myorder')}}>好的，我明白了</button>
                        </div>
                    </div>
                    <div className="abox" hidden={this.state.status === 1}>
                        <div className='cen'>
                            <img alt="" src="assets/imgs/cuowutishi.png" />
                        </div>
                        <h1>支付失败！</h1>
                        <p>您的订单支付失败，请您确定后重新支付</p>
                        <div className="cen">
                            <button onClick={()=>{this.setState({alert:false})}}>确定</button>
                        </div>
                    </div>
                </div>

                <Footer />
            </div>
        )
    }
}
